<script setup lang="ts">
import type {
  SysLogOperationVo,
} from '@/typings/system/log/operation'

interface OnCloseResolveType extends CloseResolveType {}
let onCloseResolve = function (_value: OnCloseResolveType) { }

const dialogRef = $ref<DialogInstance>()
const ruleFormRef = ref<FormInstance>()
let dialogModal = $ref<SysLogOperationVo>({})
const activeName = $ref('responseBody')

// 打开
async function showDialog(args: {
  data: SysLogOperationVo
}) {
  const dialogRes = dialogRef!.openDialog<OnCloseResolveType>({
    title: '操作日志-详情',
    size: 'full',
  })

  dialogModal = args.data
  onCloseResolve = dialogRes.onCloseResolve

  return await dialogRes.dialogPrm
}

// 取消
function cancel() {
  ruleFormRef.value?.clearValidate()
  onCloseResolve({ type: false })
}

const responseBody = $computed(() => {
  return JSON.parse(dialogModal.responseBody ?? 'null')
})
const requestBody = $computed(() => {
  const res = JSON.parse(dialogModal.requestBody ?? 'null')
  if (res.query != null) {
    res.query = JSON.parse(res.query)
  }
  if (res.body != null) {
    res.body = JSON.parse(res.body)
  }
  return res
})
const requestHeader = $computed(() => {
  return JSON.parse(dialogModal.requestHeader ?? 'null')
})

defineExpose({ showDialog })
</script>

<template>
  <sy-dialog
    ref="dialogRef"
    :before-close="cancel"
    hide-confirm
    hide-full
  >
    <div
      un-flex="~ col"
      un-h-full
    >
      <el-descriptions
        border
        :column="5"
      >
        <el-descriptions-item label="标题">
          {{ dialogModal.title }}
        </el-descriptions-item>
        <el-descriptions-item label="应用名称">
          {{ dialogModal.applicationName }}
        </el-descriptions-item>
        <el-descriptions-item label="IP">
          {{ dialogModal.requestIp }}
        </el-descriptions-item>
        <el-descriptions-item label="IP地址">
          {{ dialogModal.ipAddress }}
        </el-descriptions-item>
        <el-descriptions-item label="操作系统">
          {{ dialogModal.operatingSystem }}
        </el-descriptions-item>
        <el-descriptions-item label="浏览器类型">
          {{ dialogModal.browserType }}
        </el-descriptions-item>
        <el-descriptions-item label="用户类型">
          <sy-dict-single-tag
            :value="dialogModal.userType"
            dict-type="user_type"
          />
        </el-descriptions-item>
        <el-descriptions-item label="业务类型">
          <sy-dict-single-tag
            :value="dialogModal.businessType"
            dict-type="operation_business_type"
          />
        </el-descriptions-item>
        <el-descriptions-item label="操作人员">
          {{ dialogModal.operName }}
        </el-descriptions-item>
        <el-descriptions-item label="操作时间">
          {{ dialogModal.operTime }}
        </el-descriptions-item>
        <el-descriptions-item label="请求方法">
          {{ dialogModal.requestMethod }}
        </el-descriptions-item>
        <el-descriptions-item label="请求耗时">
          {{ dialogModal.costTime }}ms
        </el-descriptions-item>
        <el-descriptions-item label="请求接口">
          {{ dialogModal.method }}
        </el-descriptions-item>
      </el-descriptions>
      <el-tabs
        v-model="activeName"
        un-h-full
        un-m-t="3"
      >
        <el-tab-pane label="响应体" name="responseBody">
          <sy-edit-json v-model="responseBody" />
        </el-tab-pane>
        <el-tab-pane label="请求体" name="requestBody">
          <sy-edit-json v-model="requestBody" />
        </el-tab-pane>
        <el-tab-pane label="请求头" name="requestHeader">
          <sy-edit-json v-model="requestHeader" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </sy-dialog>
</template>

<style scoped></style>
